<div nz-row>
  <div nz-col nzSpan="4">
    <div class="sider-header">
      <span class="follow-list-header-label">我的关注</span>
      <span class="follow-list-add-link"><a (click)="showCreateListModal()"><i nz-icon nzType="plus-circle"
            nzTheme="outline" font-size="16px"></i></a></span>
    </div>
    <ul nz-menu>
      <li nz-menu-item [routerLink]="['./list',-1]" nzMatchRouter><i nz-icon nzType="user" nzTheme="outline"></i>全部关注
      </li>
      <li *ngFor="let list of followLists" nz-menu-item [routerLink]="['./list',list.id]" nzMatchRouter><i nz-icon
          nzType="solution" nzTheme="outline"></i><span>{{list.name}}</span>
        <span nz-dropdown [nzDropdownMenu]="menu" [nzDisabled]="list.id<=0">
          <span *ngIf="(mouseOverListId==0)||(mouseOverListId!=list.id)" class="list-item-more"
            (mouseenter)="mouseEnter(list.id)">{{list.mids.length}}</span>
          <span *ngIf="(mouseOverListId!=0)&&(mouseOverListId==list.id)" class="list-item-more"
            (mouseleave)="mouseLeave()"><i nz-icon nzType="more" nzTheme="outline"></i>
          </span>
          <nz-dropdown-menu #menu nzPlacement="bottomLeft">
            <ul nz-menu style="width: 150px">
              <li nz-menu-item (click)="showRenameListModal(list.id,list.name)">修改名称</li>
              <li nz-menu-item nz-popconfirm nzPopconfirmTitle="确定要删除该分组么？删除之后，该分组下的用户依旧保留"
                (nzOnConfirm)="handleDeleteList(list.id)">删除</li>
            </ul>
          </nz-dropdown-menu>
        </span>
      </li>
    </ul>
  </div>
  <div nz-col nzSpan="20" class="follow-content">
    <router-outlet></router-outlet>
  </div>
</div>
<nz-modal [(nzVisible)]="isCreateListModalVisible" nzTitle="新建分组" (nzOnCancel)="handleCreateListModalCancel()"
  (nzOnOk)="handleCreateListModalOk()" [nzOkLoading]="isCreateListModalOkLoading">
  <input nz-input placeholder="最多输入10个字" [(ngModel)]="createListModalValue" />
</nz-modal>
<nz-modal [(nzVisible)]="isRenameListModalVisible" nzTitle="修改分组名" (nzOnCancel)="handleRenameListModalCancel()"
  (nzOnOk)="handleRenameListModalOk()" [nzOkLoading]="isRenameListModalOkLoading">
  <input nz-input placeholder="最多输入10个字" [(ngModel)]="renameListName" />
</nz-modal>
